<template>
  <div class="app-container">
    <el-card shadow="never" class="table-container">
      <el-page-header @back="goBack">
        <template #content>
          <span class="text-large font-600 mr-3"> 公告详情 </span>
        </template>
      </el-page-header>
      <h3 style="text-align: center">{{ formData.title }}</h3>
      <el-descriptions>
        <el-descriptions-item align="center">{{
          "发布人：" + formData.author + "&nbsp;&nbsp;" + formData.created_at
        }}</el-descriptions-item>
        <el-descriptions-item>
          {{ formData.content }}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { getNoticeForm } from "@/api/notice";
import { NoticeForm } from "@/api/notice/types";
import { useRoute } from "vue-router";
import { useTagsViewStore } from "@/store";

defineOptions({
  name: "NoticeDetails",
  inheritAttrs: false,
});

const tagsViewStore = useTagsViewStore();

const formData = reactive<NoticeForm>({
  id: undefined,
  sort: 0,
});

const route = useRoute();

const goBack = () => {
  tagsViewStore.delView(route);
  history.back();
};

/** 查询 */
function handleQuery() {
  if (route.query.id) {
    getNoticeForm(<string>route.query.id)
      .then(({ data }) => {
        Object.assign(formData, { ...data });
        if (formData.author == null) {
          formData.author = "管理员";
        }
      })
      .finally(() => {
        //loading.value = false;
      });
  }
}

onMounted(() => {
  handleQuery();
});
</script>

<style></style>
